<template>
  <div>
    <ul>
      <li class="questItem solidItem">
        <el-row class="quest">
          <span>1. 该单位所有建筑物入口是否有清晰明显的禁止吸烟提示</span>
        </el-row>
        <el-row class="answer">
          <el-radio-group v-model="form.answers[0].checked">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-row>
        <el-row class="remark" v-show="form.answers[0].checked==0">
          <el-col>
            <el-input type="textarea" :rows="4" :disabled="form.answers[0].checked!==0" v-model="form.answers[0].remark" placeholder="说明存在的问题"></el-input>
          </el-col>
        </el-row>
      </li>
      <li class="questItem solidItem">
        <el-row class="quest">
          <el-col :span="12">2. 室内场所状况</el-col>
          <el-col :span="10">
            <el-select name="unitarea" v-model="unitarea" value-key="type" >
              <el-option v-for="item in areas" :key="item.type" :value="item" :label="item.name"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <div>
          <ul>
            <li class="questItem">
              <el-row class="quest">
                (1) 是否有规范的禁烟标识
              </el-row>
              <el-row class="answer">
                <el-radio-group v-model="form.answers[1].answers[unitarea.type-1].answers[0].checked">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-row>
              <el-row class="remark" v-show="form.answers[1].answers[unitarea.type-1].answers[0].checked==0">
                <el-col>
                  <el-input type="textarea" :rows="4" :disabled="form.answers[1].answers[unitarea.type-1].answers[0].checked!==0" v-model="form.answers[1].answers[unitarea.type-1].answers[0].remark" placeholder="说明存在的问题"></el-input>
                </el-col>
              </el-row>
            </li>
            <li class="questItem">
              <el-row class="quest">
                (2) 是否有烟味
              </el-row>
              <el-row class="answer">
                <el-radio-group v-model="form.answers[1].answers[unitarea.type-1].answers[1].checked">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-row>
              <el-row class="remark" v-show="form.answers[1].answers[unitarea.type-1].answers[1].checked==1">
                <el-col>
                  <el-input type="textarea" :rows="4" :disabled="form.answers[1].answers[unitarea.type-1].answers[1].checked!==1" v-model="form.answers[1].answers[unitarea.type-1].answers[1].remark" placeholder="输入文字说明"></el-input>
                </el-col>
              </el-row>
            </li>
            <li class="questItem">
              <el-row class="quest">
                (3) 是否有人吸烟
              </el-row>
              <el-row class="answer">
                <el-radio-group v-model="form.answers[1].answers[unitarea.type-1].answers[2].checked">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-row>
              <el-row class="remark" v-show="form.answers[1].answers[unitarea.type-1].answers[2].checked==1">
                <el-col :span="12">吸烟人数：</el-col>
                <el-col :span="10">
                 <el-select name="unitarea" v-model="form.answers[1].answers[unitarea.type-1].answers[2].ext1" :disabled="form.answers[1].answers[unitarea.type-1].answers[2].checked!==1" >
                    <el-option :label="1" :value="1">1人</el-option>
                    <el-option :label="2" :value="2">2人</el-option>
                    <el-option :label="3" :value="3">3人</el-option>
                    <el-option :label="4" :value="4">4人及以上</el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">是否有工作人员</el-col>
                <el-col :span="10">
                  <el-radio-group v-model="form.answers[1].answers[unitarea.type-1].answers[2].ext" :disabled="form.answers[1].answers[unitarea.type-1].answers[2].checked!=1" >
                    <el-radio :label="1">有</el-radio>
                    <el-radio :label="0">无</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
              <el-row class="remark" v-show="form.answers[1].answers[unitarea.type-1].answers[2].checked==1">
                <el-col>
                  <el-input type="textarea" :rows="4" :disabled="form.answers[1].answers[unitarea.type-1].answers[2].checked!==1" v-model="form.answers[1].answers[unitarea.type-1].answers[2].remark" placeholder="输入文字说明"></el-input>
                </el-col>
              </el-row>
            </li>
            <li class="questItem">
              <el-row class="quest">
                (4) 是否有烟具(如烟灰缸等)
              </el-row>
              <el-row class="answer">
                <el-radio-group v-model="form.answers[1].answers[unitarea.type-1].answers[3].checked">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-row>
              <el-row class="remark" v-show="form.answers[1].answers[unitarea.type-1].answers[3].checked==1">
                <el-col :span="12">烟具数量：</el-col>
                <el-col :span="10">
                  <el-select name="unitarea" v-model="form.answers[1].answers[unitarea.type-1].answers[3].ext" :disabled="form.answers[1].answers[unitarea.type-1].answers[3].checked!==1" >
                    <el-option :label="1" :value="1">1个</el-option>
                    <el-option :label="2" :value="2">2个</el-option>
                    <el-option :label="3" :value="3">3个</el-option>
                    <el-option :label="4" :value="4">4个</el-option>
                    <el-option :label="5" :value="5">5个及以上</el-option>
                  </el-select>
                </el-col>
              </el-row>
              <el-row class="remark" v-show="form.answers[1].answers[unitarea.type-1].answers[3].checked==1">
                <el-col>
                  <el-input type="textarea" :rows="4" :disabled="form.answers[1].answers[unitarea.type-1].answers[3].checked!==1" v-model="form.answers[1].answers[unitarea.type-1].answers[3].remark" placeholder="输入文字说明"></el-input>
                </el-col>
              </el-row>
            </li>
            <li class="questItem">
              <el-row class="quest">
                (5) 是否有烟头
              </el-row>
              <el-row class="answer">
                <el-radio-group v-model="form.answers[1].answers[unitarea.type-1].answers[4].checked">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-row>
              <el-row class="remark" v-show="form.answers[1].answers[unitarea.type-1].answers[4].checked==1">
                <el-col :span="12">烟头数量：</el-col>
                <el-col :span="10">
                  <el-select name="unitarea" v-model="form.answers[1].answers[unitarea.type-1].answers[4].ext" :disabled="form.answers[1].answers[unitarea.type-1].answers[4].checked!==1" >
                    <el-option :label="1" :value="1">1个</el-option>
                    <el-option :label="2" :value="2">2个</el-option>
                    <el-option :label="3" :value="3">3个</el-option>
                    <el-option :label="4" :value="4">4个</el-option>
                    <el-option :label="5" :value="5">5个及以上</el-option>
                  </el-select>
                </el-col>
              </el-row>
              <el-row class="remark" v-show="form.answers[1].answers[unitarea.type-1].answers[4].checked==1">
                <el-col>
                  <el-input type="textarea" :rows="4" :disabled="form.answers[1].answers[unitarea.type-1].answers[4].checked!==1" v-model="form.answers[1].answers[unitarea.type-1].answers[4].remark" placeholder="输入文字说明"></el-input>
                </el-col>
              </el-row>
            </li>
          </ul>
        </div>
      </li>
      <li class="questItem solidItem">
        <el-row class="quest">
          3. 该单位是否设置室外吸烟区
        </el-row>
        <el-row class="answer">
          <el-radio-group v-model="form.answers[2].checked">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-row>
        <el-row class="remark" v-show="form.answers[2].checked==1">
          <el-checkbox-group v-model="form.answers[2].remark" :disabled="form.answers[2].checked!==1">
            <el-checkbox class="answer" label="a">a. 远离密集人群和必经通道</el-checkbox>
            <el-checkbox class="answer" label="b">b. 有明显的引导标识</el-checkbox>
            <el-checkbox class="answer" label="c">c. 有温馨提示</el-checkbox>
          </el-checkbox-group>
        </el-row>
      </li>
      <li class="questItem solidItem">
        <el-row class="quest">
          4. 该单位是否有创建无烟党政机关的承诺在显著位置张贴或摆放
        </el-row>
        <el-row class="answer">
          <el-radio-group v-model="form.answers[3].checked">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-row>
      </li>
      <li class="questItem solidItem">
        <el-row class="quest">
          5. 该单位是否有一定数量和种类的控烟宣传形式，如新媒体，电视，展板，宣传栏，海报，折页，标语等
        </el-row>
        <el-row class="answer">
          <el-radio-group v-model="form.answers[4].checked">
            <el-radio :label="3">3种及以上</el-radio>
            <el-radio :label="2">2种</el-radio>
            <el-radio :label="1">1种</el-radio>
            <el-radio :label="0">无</el-radio>
          </el-radio-group>
        </el-row>
      </li>
      <li class="questItem solidItem">
        <el-row class="quest">
          6. 该单位内商店，小卖部，食堂等是否出售烟草制品
        </el-row>
        <el-row class="answer">
          <el-radio-group v-model="form.answers[5].checked">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-row>
        <el-row class="remark" v-show="form.answers[5].checked==1">
          <el-col>
            <el-input type="textarea" :rows="4" :disabled="form.answers[5].checked!==1" v-model="form.answers[5].remark" placeholder="输入文字说明"></el-input>
          </el-col>
        </el-row>
      </li>
      <li class="questItem solidItem">
        <el-row class="quest">
          7. 该单位是否有烟草广告，促销或赞助
        </el-row>
        <el-row class="answer">
          <el-radio-group v-model="form.answers[6].checked">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-row>
        <el-row class="remark" v-show="form.answers[6].checked==1">
          <el-col>
            <el-input type="textarea" :rows="4" :disabled="form.answers[6].checked!==1" v-model="form.answers[6].remark" placeholder="输入文字说明"></el-input>
          </el-col>
        </el-row>
      </li>
      <li class="questItem solidItem">
        <el-row class="quest">
          图片上传
        </el-row>
        <el-row class="answer">
          <upload-image ref="uploadImage"/>
        </el-row>
      </li>
      <li class="questItem solidItem">
        <el-row style="margin-top: 15px;">
          <el-col :span="18">
            最终得分：{{form.total}}
          </el-col>
          <el-col :span="6">
            <el-button type="danger" @click="resetPoints">一键重置</el-button>
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
</template>

<script>
import { getImages } from '@/api/questions'
import UploadImage from './UploadImage'
const config = require('../../config')

export default {
  name: 'Office',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      imgQuality: 0.5,
      uploadData: {
        dataType: '0',
        oldFilePath: ''
      },
      unitarea: {
        'type': 1,
        'name': '食堂'
      },
      areas: [{
        'type': 1,
        'name': '食堂'
      }, {
        'type': 2,
        'name': '一楼大厅'
      }, {
        'type': 3,
        'name': '电梯'
      }, {
        'type': 4,
        'name': '会议室'
      }, {
        'type': 5,
        'name': '办公室'
      }, {
        'type': 6,
        'name': '男厕所'
      }, {
        'type': 7,
        'name': '走廊'
      }, {
        'type': 8,
        'name': '楼梯'
      }, {
        'type': 9,
        'name': '传达室(门卫)'
      }, {
        'type': 10,
        'name': '其他'
      }],
      DEFAULTANSWER: JSON.stringify({
        answers: [{
          checked: -1,
          remark: ''
        }, {
          answers: [{
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }, {
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }, {
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }, {
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }, {
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }, {
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }, {
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }, {
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }, {
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }, {
            checked: -1,
            answers: [{checked: -1, remark: ''}, {checked: -1, remark: ''}, {checked: -1, remark: '', ext: -1, ext1: 1}, {checked: -1, remark: '', ext: 1}, {checked: -1, remark: '', ext: 1}]
          }]
        }, {
          checked: -1,
          remark: []
        }, {
          checked: -1,
          remark: []
        }, {
          checked: -1,
          remark: []
        }, {
          checked: -1,
          remark: ''
        }, {
          checked: -1,
          remark: ''
        }],
        total: 0,
        pics: []
      }),
      form: {},
      unchangedform: ''
    }
  },
  computed: {
    cmpAnswers: function () {
      return JSON.parse(JSON.stringify(this.form))
    },
    uploadUrl () {
      return '/api/uploadfiles'
    }
  },
  components: {
    UploadImage
  },
  created () {
    this.resetAnswers(null)
  },
  mounted () {
    this.getFileList()
  },
  watch: {
    cmpAnswers: {
      handler: function (newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.recalcPoints()
      },
      immediate: true // 初始化页面后立即监听
    }
  },
  methods: {
    recalcPoints () {
      var point = 75
      var notdef = true

      if (this.form == null || !this.form['answers']) {
        this.form.total = 0
        return
      }

      if (this.form.answers[0].checked !== -1) {
        notdef &= false
      }
      if (this.form.answers[0].checked === 1) {
        point += 5
      }

      var detp = this.getDetailPoints()
      if (detp !== -999) {
        notdef &= false
        point += detp
      }

      if (this.form.answers[2].checked !== -1) {
        notdef &= false
      }
      if (this.form.answers[2].checked === 1) {
        if (this.form.answers[2].remark.indexOf('a') >= 0) {
          point += 2
        }
        if (this.form.answers[2].remark.indexOf('b') >= 0) {
          point += 2
        }
        if (this.form.answers[2].remark.indexOf('c') >= 0) {
          point += 1
        }
      }

      if (this.form.answers[3].checked !== -1) {
        notdef &= false
      }
      if (this.form.answers[3].checked === 1) {
        point += 3
      }

      if (this.form.answers[4].checked !== -1) {
        notdef &= false
      }
      switch (this.form.answers[4].checked) {
        case 3:
          point += 4
          break
        case 2:
          point += 3
          break
        case 1:
          point += 2
          break
      }

      if (this.form.answers[5].checked !== -1) {
        notdef &= false
      }
      if (this.form.answers[5].checked === 0) {
        point += 4
      }

      if (this.form.answers[6].checked !== -1) {
        notdef &= false
      }
      if (this.form.answers[6].checked === 0) {
        point += 4
      }

      if (notdef) {
        point = 0
      }

      this.form.total = point
    },
    getDetailPoints () {
      var curpnts = [0, 0, 0, 0, 0]
      var notdef = true
      this.form.answers[1].answers.forEach(element => {
        if (element.answers[0].checked !== -1) {
          notdef &= false
        }
        if (element.answers[0].checked === 0) {
          curpnts[0] += 1
        }
        if (element.answers[1].checked !== -1) {
          notdef &= false
        }
        if (element.answers[1].checked === 1) {
          curpnts[1] += 1
        }
        if (element.answers[2].checked !== -1) {
          notdef &= false
        }
        if (element.answers[2].checked === 1 && element.answers[2].ext1) {
          curpnts[2] += element.answers[2].ext1
        }
        if (element.answers[3].checked !== -1) {
          notdef &= false
        }
        if (element.answers[3].checked === 1 && element.answers[3].ext) {
          curpnts[3] += element.answers[3].ext
        }
        if (element.answers[4].checked !== -1) {
          notdef &= false
        }
        if (element.answers[4].checked === 1 && element.answers[4].ext) {
          curpnts[4] += element.answers[4].ext
        }
      })

      if (notdef) {
        return -999
      }

      var pnt = 0
      if (curpnts[0] > 5) {
        pnt -= 10
      } else {
        pnt -= curpnts[0] * 2
      }

      if (curpnts[1] > 0) {
        pnt -= 10
      }

      if (curpnts[2] > 4) {
        pnt -= 20
      } else {
        pnt -= curpnts[2] * 5
      }

      if (curpnts[3] > 5) {
        pnt -= 15
      } else {
        pnt -= curpnts[3] * 3
      }

      if (curpnts[4] > 5) {
        pnt -= 20
      } else {
        pnt -= curpnts[4] * 4
      }

      return pnt
    },
    getAllAnswers () {
      this.recalcPoints()
      this.form.pics = this.$refs.uploadImage.getImageIds()
      return JSON.stringify(this.form)
    },
    resetAnswers (data) {
      if (data) {
        this.form = data // JSON.parse(data)
        this.unchangedform = JSON.stringify(this.form)
      } else {
        this.form = JSON.parse(this.DEFAULTANSWER)
        this.unchangedform = this.DEFAULTANSWER
      }

      this.imageUrl = this.form.pics
      this.getFileList(this.imageUrl)
    },
    answerUnChanged () {
      return this.unchangedform === JSON.stringify(this.form)
    },
    resetPoints () {
      if (!this.answerUnChanged()) {
        this.$confirm('重置记录将清除所有信息，是否继续?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.resetAnswers(JSON.parse(this.unchangedform))
        }).catch(() => {
        })
      } else {
        this.resetAnswers(JSON.parse(this.unchangedform))
      }
    },
    async getFileList (imgIds) {
      if (!imgIds || imgIds.length <= 0) {
        if (this.$refs.uploadImage) {
          this.$refs.uploadImage.setImageList([], [])
        }
        return []
      }
      var _that = this
      const result = await getImages(imgIds).then((res) => {
        var data = res.data
        if (data.errno === 0) {
          var rets = []
          data.data.forEach(element => {
            rets.push({id: element.id, url: config.dev.cdnHost + element.destination.replace('cdn', '') + element.filename, title: '', preview: '1'})
          })
          return rets
        } else {
          return []
        }
      }).catch(err => {
        _that.$message.error('服务器访问异常，请稍后再试')
        console.log(err)
        return []
      })
      this.$refs.uploadImage.setImageList(result, imgIds)
      return result
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getFileList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getFileList()
    }
  }
}
</script>

<style scoped>
@import "../assets/css/global.css";
</style>
